@extends('app.base')

@section('page_title')
  {{ $post->title }} - 诗友作品
@endsection

@section('page_header')
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" href="/bower_components/AdminLTE/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
@endsection

@section('content')
  <div class="top-header">
    <h3>诗友作品</h3>
    <span class="go-back"><i class="fa fa-angle-left"></i></span>
  </div>
  <div class="content" style="background-color:#f8f8f8;float:left;width:100%;">
    <div class="card post-card" style="margin-bottom:20px;">
      <h3 class="title">《{{ $post->title }}》</h3>
      <p class="author">{{ $post->user->name }}</p>
      <div>
        {!! $post->content !!}
      </div>
    </div>
    <div class="card comment-card">
      @if (App\Guards\PostGuard::post_can_add_comment($post))
      <div class="comment-box">
        <div class="form-group">
          <i class="fa fa-commenting-o"></i>
          <input type="text" id="comment" name="comment" placeholder="请输入您的评论...">
          <button class="btn btn-comment">评论</button>
        </div>
      </div>
      <div class="comments"></div>
      <div class="pagination">
        <input type="hidden" name="page" value="1" />
        <input type="hidden" name="last_page" value="1" />
        <span class="prev" data-step="-1">上一页</span> |
        <span class="next" data-step="1">下一页</span>
        <p>共<i class="total"></i> <i class="current_page"></i>/<i class="last_page"></i></p>
      </div>
      @else
      <div class="comments">
        <p class="comment-info">文章暂未通过审核，无法进行评论</p>
      </div>
      @endif
    </div>
  </div>
@endsection

@section('page_script')
  <script>
$(function(){
  $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  })

  $('.pagination').hide();
  var loadComments = function(page=1){
    $.get('/posts/{{ $post->id }}/comment?page=' + page, function(d){
      console.log(d);
      if(page == 1 && d.data.length == 0){
        $('.comments').html('<p class="comment-info">暂无评论，快来抢沙发吧!</p>')
      }else{
        $('.comments').html('')
        if(d.last_page>1){
          $('.pagination').show();
          $('.pagination input[name=page]').val(d.p);
          $('.pagination input[name=last_page]').val(d.last_page);
          $('.total').text(d.total + '条评论');
          $('.current_page').text(page + '页');
          $('.last_page').text(d.last_page + '页');
        }else{
          $('.pagination').hide();
        }

        for(var i=0;i<d.data.length;i++){
          var comment = d.data[i]
          $('.comments').append(
            '<div class="comment">' +
            '  <div><a href="/users/' + comment.uid + '">' + comment.username + '</a><span class="date">' + comment.created_at + '</span></div>' +
            '  <p>' + comment.content + '</p>' +
            '</div>'
          )
        }
      }
    })
  }
  loadComments()

  $('.pagination span').on('click', function(e){
    var step = $(this).data('step'),
        p = $('input[name=page]').val(),
        last_page = $('input[name=last_page]').val(),
        target = parseInt(p) + parseInt(step);
    if(target > last_page) alert("已到最后一页!")
    if(target < 1) alert("已到第一页!")
    loadComments(target)
  })

  $('#comment').on('keydown', function(e){
    if(e.keyCode == 13) addComment()
  })
  $('.btn-comment').on('click', function(e){
    addComment()
  })

  var addComment = function(){
    var text = $.trim($('#comment').val());
    if(text) {
      if(text.length > 10){
        $.post('/posts/{{ $post->id }}/comment', {content:text}, function(d){
            $('#comment').val('');
            /*
            var comment = d.comment;
            $('.comments').append(
              '<div class="comment">' +
              '  <div><a href="/users/' + comment.uid + '">' + comment.username + '</a><span class="date">' + comment.time + '</span></div>' +
              '  <p>' + comment.content + '</p>' +
              '</div>'
            )
            */
            alert("您好，您的留言已经收到，管理员会在三个工作日内答复，谢谢您的关注和支持!")
        })
      }else{
        alert("评论过短，最少需要10个字符!")
      }
    }else{
      alert("请输入评论!")
    }
  }
})
  </script>
@endsection
